<template>
  <div div="content">
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="资源库ID" >
                  <el-input v-model="search.groupId"></el-input>
              </el-form-item> 
              <el-form-item label="资源ID" >
                  <el-input v-model="search.productionId"></el-input>
              </el-form-item>   
              <br>
              <el-form-item label="出入库类型" >
                <el-select v-model="search.type" filterable clearable placeholder="请选择" >
                  <el-option
                    v-for="item in PRODUCTION_ACCESS_STORAGE"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="设备" >
                <el-select v-model="search.targetMac" filterable clearable placeholder="请选择" >
                  <el-option
                    v-for="item in machineList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>   
              <br>
              <el-form-item label=" 出/入库时间(开始)" >
                <el-date-picker
                  v-model="search.startCreateTime"
                  type="datetime" style="margin-top:-5px;margin-left:-1px;"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>  

              <el-form-item label="出/入库时间（结束）" >
                <el-date-picker
                  v-model="search.endCreateTime"
                  type="datetime" style="margin-top:-5px;margin-left:-1px;"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>   
              <el-form-item label="使用人员" >
                <el-select v-model="search.targetUser" filterable clearable placeholder="请选择" >
                  <el-option
                    v-for="item in workerList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>             
              </el-form-item>   
              <br>       
              <el-button type="primary" @click="searchBtn" style="float:right;margin-left:10px;">确认</el-button>&nbsp;&nbsp;
              <el-button  @click="researchBtn" type="primary"  style="float:right;">重置</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
        <el-button type="primary" @click="dialogShow('','insert')">新增</el-button>
      </el-col>
    </el-row>
    <el-table  :data="tableList"  tooltip-effect  highlight-current-row border stripe>
        <el-table-column property="tcode.name" label="类型" min-width="120" align="center" sortable></el-table-column>
        <el-table-column property="count" label="数量" min-width="120" align="center" sortable></el-table-column>
        <el-table-column property="group.name" label="单一资源库" min-width="120" align="center" sortable></el-table-column>
        <el-table-column property="creatorName" label="出/入库工作人员" min-width="120" align="center" sortable></el-table-column>
        <el-table-column property="targetUserName" label="出/入库的目标使用人员" min-width="120" align="center" sortable></el-table-column>
        <el-table-column property="createTime" label="出入库对应的操作时间" min-width="120" align="center" sortable>
          <template slot-scope="scope">
            {{scope.row.createTime?timestampToTime(scope.row.createTime,'yyyy-mm-dd hh:mm:ss'):''}}
          </template>
        </el-table-column>
        <el-table-column property="targetMachine.name" label="目标使用机床" min-width="120" align="center" sortable></el-table-column>
        <el-table-column property="remark" label="描述" min-width="120" align="center" sortable></el-table-column>
          <!-- <el-table-column property="" label="操作" min-width="80" align="center" >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dialogShow(scope.row,'update')" >编辑</el-button>
              <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column> -->
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" :close-on-click-modal="false" width="700px">
      <el-form label-position="right" label-width="180px" :model="childrenData">
          <el-form-item label="类型">
              <el-select v-model="storage.type" filterable clearable placeholder="请选择" >
                  <el-option
                    v-for="item in PRODUCTION_ACCESS_STORAGE"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="数量">
              <el-input type="number" v-model="storage.count" style="width:120px"></el-input>
          </el-form-item>
          <el-form-item label="单一资源库">
            <el-select v-model="storage.groupId" filterable clearable placeholder="请选择" @change="sysVal">
                  <el-option
                    v-for="item in productionList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单一资源库">
            <el-select v-model="storage.productionId" filterable clearable placeholder="请选择" >
                  <el-option
                    v-for="item in productionChildDataList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出/入库时间" >
                <el-date-picker
                  v-model="storage.createTime"
                  type="datetime"
                  placeholder="选择日期"
                  style="margin-top:-5px;margin-left:-1px;"
                  >
                </el-date-picker>
          </el-form-item>  
          <el-form-item label="设备" >
                <el-select v-model="storage.targetMac" filterable clearable placeholder="请选择" >
                  <el-option
                    v-for="item in machineList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
          </el-form-item>  
          <el-form-item label="出/入库的目标使用人员">
                <el-select v-model="storage.targetUser" filterable clearable placeholder="请选择" >
                  <el-option
                    v-for="item in workerList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>     
          </el-form-item>
          <el-form-item label="描述">
              <el-input type="textarea" v-model="storage.remark" style="width:120px"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import planApi from 'plugins/axios/planApi.js';
export default {
  data(){
    return{
      isSearchButton:false,
      search:{

      },
      productionList:[],
      productionChildDataList:[],
      tableList:[],
      workerList:[],
      machineList:[],
      PRODUCTION_ACCESS_STORAGE:[],
      pagination:{/**分页参数 */
        currentPage:1,
        pageSize:10,
        total:0
      },
      dialog:{
        title:'',
        isShow:false
      },
      storage:{},
    }
  },
  created(){
    this.queryMachineList();
    this.queryProductionList();
    this.queryPRODUCTION_ACCESS_STORAGE();
    this.queryWorkerList();
    this.queryStorageByCondition();
  },
  methods:{
    dialogShow(data,type){/**添加节点 */
      let self = this;
      if(type==='insert'){
        self.dialog.title ='新增';
      }else if (type==='update'){
         self.dialog.title ='编辑';
         self.storage = data;
      }
      self.dialog.isShow = true;
    },
    sysVal(){
      let self = this;
      self.queryByCondition();
    },
    queryByCondition(){
      let self = this;
      let param = {
        groupId:self.storage.groupId
      }
      planApi.queryByCondition(param).then(res=>{
        self.productionChildDataList = res.content;
        self.storage.productionId =  self.productionChildDataList[0].id;
      });
    },
    //查询单一资源列表
    queryProductionList(){
      let self = this;
      planApi.productionGroupNodeAll().then(res=>{
        self.productionList = res.content.children;
        self.storage.groupId ='';
        self.storage.groupId = self.productionList[0].id;
        self.queryByCondition();
      });
    },
    //查询机器列表
    queryWorkerList(){
      let self = this;
      planApi.getWorkerList().then(res=>{
        self.workerList = res.content;
      });
    },
    //查询机器列表    
    queryMachineList(){
      let self = this;
      planApi.queryMachineList().then(res=>{
        self.machineList = res.content;
      });
    },
    //查询单一资源的出入库类型
    queryPRODUCTION_ACCESS_STORAGE(){
      let self = this;
      let type = 'PRODUCTION_ACCESS_STORAGE';
      planApi.queryPRODUCTION_ACCESS_STORAGE(type).then(res=>{
        self.PRODUCTION_ACCESS_STORAGE = res.content;
      });
    },
    searchBtn(){
      let self = this;
      self.isSearchButton = true;
      self.queryStorageByCondition();
    },
    researchBtn(){
      let self = this;
      self.search ={
        currentPage:1,
        pageSize:self.pagination.pageSize,
      }
      self.queryStorageByCondition();
    },
    reinsertBtn(){
      let self = this;
      self.storage ={
       
      }
    },
    submitDialog(){
      let self = this;
      // let type =  self.dialog2.title.indexOf('新增')>-1?1:2;
          planApi.insertStorage(self.storage).then(res=>{
            self.dialog.isShow= false;
            self.reinsertBtn();
            self.queryStorageByCondition();
            self.$message.success(res.desc)
          })
    },
    queryStorageByCondition(){
      let self = this;
      self.search.currentPage = self.isSearchButton==true?1:self.pagination.currentPage;
      self.search.pageSize = self.pagination.pageSize;

      planApi.queryStorageByCondition(self.search).then(res=>{
        self.tableList = res.content.records;
        self.isSearchButton = false;
        self.pagination.total = res.content.total;
      });
    },
    handleSizeChange(size){/**切换分页条数 */
      this.pagination.pageSize=size;
      this.pagination.currentPage=1;
      this.queryStorageByCondition();
    },
    handleCurrentChange(current){/**切换分页页数 */
      this.pagination.currentPage=current;
      this.postData.isSearchButton = false;
      this.queryStorageByCondition();
    }
  }
}
</script>
<style scoped>

</style>